<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 组件的使用 -->
        <!-- <show-img></show-img>-->
        <show-img v-for="img in imgs" :src="img.src"></show-img>

        <com-header></com-header>
        <com-content></com-content>
        <com-footer></com-footer>

    </div>


</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>
    // 注册公共组件
    // 格式： Vue.component(组件名, 组件的配置)
    Vue.component('show-img', {
        // props: 是定义当前组件可以传入的参数
        // 在这里定义的值当相当于就是在data中设置了一个数据并且从组件的外部传参进行赋值
        props: ['src'],
        // 当前组件默认的数据
        data: function () {
            return {

            }
        },
        // template:是当前组件的模板
        template: `
        <div>
            <img style="width: 400px;" :src="src" alt="">
        </div>
        `
    })

    Vue.component('com-header', {
        data: function () {
            return {

            }
        },
        template: `
        <div class="head">
            <h1>头部</h1>
        </div>
        `
    })

    Vue.component('com-content', {
        data: function () {
            return {

            }
        },
        template: `
        <div class="content">
            <h1>内容主体</h1>
        </div>
        `
    })

    Vue.component('com-footer', {
        data: function () {
            return {

            }
        },
        template: `
        <div class="foot">
            <h1>底部</h1>
        </div>
        `
    })


    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            imgs: [
                { title: '帅气猫', src: '1.webp' },
                { title: '蓝猫', src: '2.webp' },
            ]
        },
        // 使用生命周期
        beforeCreate: function () {

        },
        mounted: function () {

        },

        // methods是当前应用定义的函数方法
        methods: {

        },
    })



</script>

</html>